<template>
  <div class="product_item" @click="goToProductDetail">
    <img :src="productObj.image" :alt="productObj.name">
    <div class="product_item_info">
      <div class="product_item__price">{{productObj.price}}</div>
      <div class="product_item__name">{{productObj.name}}</div>
    </div>
    <div class="tag">特价</div>
  </div>
</template>

<script>
export default {
  name: 'productItem',
  props: {
    product: {
      type: Object
    }
  },
  data () {
    return {
      productObj: this.product
    }
  },
  methods: {
    goToProductDetail () {
      console.log('点击首页促销商品')
      this.$router.push(`/product_detail/${this.productObj.id}`)
    }
  }
}
</script>

<style lang="less" scope="scoped">
.product_item{
  width:100%;
  height: 100%;
  position:relative;
  box-sizing: border-box;
  img{
    width:100%;
    height:80%;
  }
  .tag{
    position: absolute;
    top:0;
    left:0;
    color:#fff;
    background-color: #e74c3c;
    box-sizing: border-box;
    font-size: 12px;
    padding:2px 5px;
    border-radius: 5px;
  }
  .product_item_info{
    width:100%;
    height: 20%;
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    .product_item__price{
      flex:1;
      font-size: 14px;
      color:#e74c3c;
    }
    .product_item__price::before{
      content:'¥';
      color:#e74c3c;
    }
    .product_item__name{
      flex:3;
      font-size: 13px;
    }
  }
}

</style>
